<template>

  <div id="Content">
    <div id="Catalog">
      <h2>我的订单</h2>

      <el-table :data="orders">
        <el-table-column label="订单编号" prop="orderId"/>
        <el-table-column label="下单日期" prop="orderDate"/>
        <el-table-column label="总价" prop="totalPrice"/>
        <el-table-column label="支付情况" prop="payStatus">
          <template #default="scope1">
            <span v-if="scope1.row.payStatus === 'yes'">已支付</span >
            <span v-else>未支付</span >
          </template>
        </el-table-column>

        <el-table-column align="right" label="操作" width="200px">
          <template #default="scope">
            <RouterLink to="/main/orderDetail">
              <el-button size="small" @click="handleDetail(scope.row['orderId'])">
                查看详情
              </el-button>
            </RouterLink>
          </template>
        </el-table-column>

      </el-table>

    </div>
  </div>

</template>

<script>
export default {
  name: "OrderView"
}
</script>
<script setup>
import {onMounted, reactive} from "vue";
import api from "../../api";

const accountJson = sessionStorage.getItem('user')
const account = JSON.parse(accountJson)
// const user_id = 'j2ee'//测试用
const user_id = account.username
const orders = reactive([])

onMounted(() => {
  getData()
})

const getData = () => {
  console.log(user_id)
  api.getOrdersByUserid(user_id).then(res => {
    orders.splice(0, orders.length)//清空旧数据
    orders.push(...res.data.data)//update,from date results
  })
}

const handleDetail=(order_id)=>{
  sessionStorage.setItem('order_id', order_id)
  console.log("跳转详情页面")
}

</script>
<style scoped>

</style>